<template>
  <div class="nei">
    <div class="box1">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">地产管理</el-breadcrumb-item>
      <el-breadcrumb-item>地产登记</el-breadcrumb-item>
      
    </el-breadcrumb>
    <h2 style="margin-top: 15px;">地产记录</h2>
    <!-- <div>
      <input type="text" placeholder="用户名">
      <el-button @click="change">查询</el-button>
    </div> -->
    <div style="margin-top: 25px;">
      <el-row>
          <el-col :span="24">
            <div class="grid-content  contentTitle">
          <el-button class="add" type="primary"  icon="el-icon-plus" @click="dialogFormVisible = true" >添加地产</el-button>
          <el-input class="goIn" v-model="input" placeholder="请输入编码或名称" ></el-input>
          <span class="change">变更时间：</span>
          <el-date-picker v-model="value1" type="daterange" range-separator="--" start-placeholder="开始日期"
                end-placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary" @click="getList" class="contentTitleSearch">查询</el-button>
          <div class="dr">
            <!-- <el-button type="primary" plain >批量导入</el-button> -->
            
          <el-button type="primary" plain>导出excel</el-button>
          </div>
            </div>
        </el-col>
        
      </el-row>
    </div>

    <!-- 显示用户数据 -->
    <div class="content">
      <el-table border :data="landedList" stripe style="width: 100%" @selection-change="handleSelectionChangeDepartment" >
        <el-table-column  type="selection" width="50" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="reNumber" label="编码" width="180" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="reName" label="地产名称" width="180" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="reLandArea" label="土地面积(㎡)" width="180" header-align="center" align="center"></el-table-column>
        <el-table-column prop="reArchitectureArea" label="建筑面积(㎡)" width="180" header-align="center" align="center"></el-table-column>
        <el-table-column prop="reNonbuildingArea" label="非建筑面积(㎡)" width="180" header-align="center" align="center"></el-table-column>
        <el-table-column prop="reAddress" label="地址" width="280" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="reState" label="状态" width="180" header-align="center" align="center">
          <template slot-scope="scope">
              {{ scope.row.hpPropertyStatus==0?"正常":"已核销" }}
            </template>
        </el-table-column>
        <el-table-column prop="reChangeTime" label="变更时间" width="180" header-align="center" align="center"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle  @click="editDialog(scope.row)"></el-button>
            <el-button type="danger" @click="removeHouseById(scope.row.reId)" icon="el-icon-delete" circle ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 批量删除以及分页 -->
    <el-row style="margin-top: 18px;">
      <el-col :span="24">
        <div class="grid-content  bottomDelete" >
          <el-button type="danger"  @click="removeHouseByIds" style="float: left;border-radius: 8px;">批量删除</el-button>
          <el-footer style="float: right;">
          <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange"
              :current-page="currentPage" :page-size="pageSize">
          </el-pagination>
        </el-footer>
        </div>
      </el-col>

    </el-row>

    <!--添加对话框 -->
    <el-dialog title="新增地产" :visible.sync="dialogFormVisible" width="650px" @close="addDialogClosed" center >
      <el-form :model="addForm" :rules="addFormRules" center ref="addFormRef">
        <el-form-item prop="reNumber" label="编码:"  class="addContent"  :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model.number="addForm.reNumber"></el-input>
        </el-form-item>
        <el-form-item prop="reName" label="地产名称:" class="addContent"  :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="addForm.reName"></el-input>
        </el-form-item>
        <el-form-item prop="reLandArea" label="土地面积:" class="addHouseArea"  :label-width="formLabelWidth">
          <el-input  autocomplete="off" placeholder="㎡" v-model.number="addForm.reLandArea"></el-input>
        </el-form-item>
        <el-form-item prop="reArchitectureArea" label="建筑面积:" class="addHouseArea"  :label-width="formLabelWidth">
          <el-input  autocomplete="off" placeholder="㎡" v-model.number="addForm.reArchitectureArea"></el-input>
        </el-form-item>
        <el-form-item prop="reNonbuildingArea" label="非建筑面积:" class="addHouseArea"  :label-width="formLabelWidth">
          <el-input autocomplete="off" placeholder="㎡" v-model.number="addForm.reNonbuildingArea"></el-input>
        </el-form-item>
        <el-form-item prop="reAddress" label="地址:" class="addContent"  :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="addForm.reAddress"></el-input>
        </el-form-item>
        <el-form-item prop="reState" label="状态:" class="addContent"  :label-width="formLabelWidth" >
            <el-radio v-model="addForm.reState" value="0" label="0" >正常</el-radio>
            <el-radio v-model="addForm.reState" value="1" label="1">已核销</el-radio>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="addHouse">添 加</el-button>
      </div>
    </el-dialog>


    <!-- 修改 -->
    <el-dialog title="编辑地产" :visible.sync="iconFormVisible" width="650px" center>
      <el-form :model="editForm" ref="editFormRef" center>
        <el-form-item prop="reNumber" label="编码:" class="addContent"  :label-width="formLabelWidth">
          <el-input v-model="editForm.reNumber" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item prop="reName" label="地产名称:" class="addContent"  :label-width="formLabelWidth">
          <el-input v-model="editForm.reName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="reLandArea" label="土地面积:"  class="addHouseArea"  :label-width="formLabelWidth">
          <el-input v-model="editForm.reLandArea" autocomplete="off" placeholder="㎡"></el-input>
        </el-form-item>
        <el-form-item prop="reArchitectureArea" label="建筑面积:" class="addHouseArea"  :label-width="formLabelWidth">
          <el-input v-model="editForm.reArchitectureArea" autocomplete="off" placeholder="㎡"></el-input>
        </el-form-item>
        <el-form-item prop="reNonbuildingArea" label="非建筑面积:" class="addHouseArea"  :label-width="formLabelWidth">
          <el-input v-model="editForm.reNonbuildingArea" autocomplete="off" placeholder="㎡"></el-input>
        </el-form-item>
        <el-form-item prop="reAddress" label="地址:" class="addContent"  :label-width="formLabelWidth">
          <el-input v-model="editForm.reAddress" autocomplete="off"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="iconFormVisible = false">取 消</el-button>
        <el-button @click="editHouse" type="primary" >确 定</el-button>
      </div>
    </el-dialog>

    </div>
    
  </div>
</template>
  
<script>

  import { mapGetters,mapActions } from 'vuex';
  import axios from '../../utils/axios';

export default {
 
  data() {
    return {
      currentPage:1,
      pageSize:10,
      total:50,
      //数据
      landedList:[],
      //批量删除复选框
      deleteData:[],
      dialogFormVisible: false,//添加对话框显示
      iconFormVisible: false,//修改对话框显示
      input: '',
      value1: '',
      value2: '',
      formLabelWidth:"120px",
      //添加数据
      addForm:{
        reNumber:'',
        reName:'',
        reLandArea:'',
        reArchitectureArea:'',
        reNonbuildingArea:'',
        reAddress:'',
        reState:'0'

      },

      //修改数据
      editForm:{
        reNumber:'',
        reName:'',
        reLandArea:'',
        reArchitectureArea:'',
        reNonbuildingArea:'',
        reAddress:'',
        reState:''
      },
      arrDel:[],
      //添加的验证
      addFormRules:{
        reNumber:[
          {required:true,message:'请输入编码',trigger:'blur'},
          {
            type:"number",
            message:"只能输入数字",
            trigger:'blur',
          }
        ],
        reName:[
          {required:true,message:'请输入地产名称',trigger:'blur'},
        ],
        reLandArea:[
          {required:true,message:'请输入土地面积',trigger:'blur'},
          ,{
            type:"number",
            message:"只能输入数字",
            trigger:'blur',
          }
        ],
        reArchitectureArea:[
          {required:true,message:'请输入建筑面积',trigger:'blur'},
          {
            type:"number",
            message:"只能输入数字",
            trigger:'blur',
          }
        ],
        reNonbuildingArea:[
          {required:true,message:'请输入非建筑面积',trigger:'blur'},
          {
            type:"number",
            message:"只能输入数字",
            trigger:'blur',
          }
        ],
        reAddress:[
          {required:true,message:'请输入地址',trigger:'blur'},
        ],
        
      }
    };
  },
  
  methods: {
    ...mapActions(["setTest"]),
      getTest(){
        let res=this.getTest(this.id);
        if(res.code==200){
          alert("成功")
        }
      },
      getList(){
        this.$axios.post('real/register/page',{"limit":this.pageSize,"page":this.currentPage,reName:this.input}).then((r)=>{
          console.log(r.data.data);
          this.landedList=r.data.data;
          this.total=r.data.count
        })
      },
      //分页
      handleCurrentChange(currentPage){
        console.log(currentPage);
        this.currentPage=currentPage;
        console.log("当前页码",currentPage);
        this.getList()
        // axios({
        //   url:'real/register/page',
        //   method:'post',
        //   data:{"page":currentPage,"limit":10}
        // }).then((r)=>{

        //   this.landedList=r.data.data
        // })
      },
      //pageSize改变事件
      handleSizeChange(currentPage){
        console.log(currentPage);
        this.pageSize=currentPage;
        this.pageSize=currentPage;
        this.getList();
      },
        //监听添加对话框关闭事件
        addDialogClosed(){
        this.$refs.addFormRef.resetFields()
      },
      //点击按钮，添加房产
      addHouse(){
        this.$refs.addFormRef.validate(async valid=>{
          console.log(valid);
          if(!valid) return
          //可以发起添加请求
          const {data:res} = await this.$axios.post('real/register/add',this.addForm);
          if(res.code !==200){
            this.$message.error('添加失败！')
          }
          this.$message.success('添加成功！');
          //添加框隐藏
          this.dialogFormVisible=false;
          //重新获取列表
          // this.handleCurrentChange(1);
          this.getList();

        })
      },
      //删除
      async removeHouseById(reId){
        console.log(reId);
        //弹框确认
        const confirmResult= await this.$confirm('此操作将永久删除该房产, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>{
           return err
        });
        //确认删除返回confirm,取消返回cancel
        console.log(confirmResult);
        if(confirmResult!=='confirm'){
          return this.$message.info('取消删除')
        }
        console.log('确认删除');
        let ids=reId
        console.log(ids);
        this.$axios.delete(`/real/register/delete/${ids}`).then(res=>{
          console.log(res);
        });
        
        
        this.$message.success('删除成功！');
          this.getList();
      },
        //批量删除
      //传输复选框的值
      handleSelectionChangeDepartment(val){
        this.deleteData=val;
        console.log(val);
        let arr=[]
        for (const key in val) {
         arr.push(val[key].reId)
        }
        console.log(arr);
        this.arrDel = arr
      },
      async removeHouseByIds(){
        //判断有没有选择
       if(this.deleteData.length==0){
        this.$message.error("您还没有勾选房产");
        return
       };
       //创建一个空数组接受复选框的值
       let DeleteContent=[];
       for (let i = 0; i < this.deleteData.length; i++) {
        let j=this.deleteData[i];
        DeleteContent.push(j.reId)
        
       }
       let ids=this.arrDel
       console.log("this.arrDel",this.arrDel);
       const confirmResult= await this.$confirm('此操作将永久删除这些房产, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>{
           return err
        });
        //确认删除返回confirm,取消返回cancel
        console.log(confirmResult);
        if(confirmResult!=='confirm'){
          return this.$message.info('取消删除')
        }
        console.log('确认删除');
    
        this.$axios.delete(`/real/register/delete/${ids}`).then(res=>{
          console.log(res);
        });
        this.$message.success('删除成功！');
        //重新渲染数据
        console.log("this",this.currentPage);
        this.handleCurrentChange(this.currentPage);
        
      },
       //修改模态框事件
     editDialog(reId){
      console.log(reId);

        this.editForm={...reId};

        this.iconFormVisible=true;
        console.log(reId);
      },
      //修改房产信息并且提交
     //修改房产信息并且提交
     editHouse(){
        this.$refs.editFormRef.validate(async valid=>{
          console.log(valid);
          //发起请求
          let obj = {id:this.editForm.reId,reNumber:this.editForm.reNumber,reName:this.editForm.reName,reLandArea:this.editForm.reLandArea,reArchitectureArea:this.editForm.reArchitectureArea,reNonbuildingArea:this.editForm.reNonbuildingArea,reAddress:this.editForm.reAddress,reState:this.editForm.reState}

          console.log("请求数据",obj)
          
          const data = this.$axios.post('/real/register/update',obj).then((res)=>{
            console.log("响应",res.data)
            this.iconFormVisible=false;
        //刷新数据
        // this.handleCurrentChange();
        this.getList();

          })
        })
        
        //关闭对话框
       
      

        //提示成功
        this.$message.success('编辑房产成功！')
      }
  },
 
  //   发起请求
  created() {
    this.getList()
  },
};
</script>
  
<style scoped>
.nei{
  width: 100%;

}
.box1{
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.add{
 padding: 12px; 
 border-radius: 8px;
 background-color: #363b64;
}
.goIn{
  width: 350px;
  margin-left: 15px;
  height: 32px;
}
.content{
  margin-top: 20px;
  width: 100%;
}
.dr{
  float: right;
  margin-left: 20px;
}
.contentTitle{
  overflow: hidden;
}
.change{
 font-size: 14px; 
 font-weight: 400;
 margin-left: 20px;
}
.contentTitleSearch{
  margin-left: 20px;
}
.addContent{
  width: 420px;
  margin-left: 80px;
}
.addHouseArea{
  width: 350px;
  margin-left: 80px;
}
.bottomDelete{
  overflow: hidden;
}
</style>
  